<template>
  <div class="chat-detail" v-if="!isShowDefalut">
    <el-tabs
      v-model="activeName"
      style="height:100%;display: flex;flex-direction: column;"
      @tab-click="handleTabClick"
    >
      <el-tab-pane :label="$t('common.tabs.customerInfo')" name="first" style="height:100%;">
        <BaseInfo
          v-if="activeName =='first'"
          @saveBizRel="$emit('saveBizRel')"
          :user-detail="userDetail"
          :source="source"
          :hx-id-obj="hxIdObj"
          :current-conversation-info="CurrentConversationInfo"
        />
      </el-tab-pane>
      <el-tab-pane :label="$t('common.tabs.serviceRecordList')" name="second" style="height:100%;">
        <ServiceRecord v-if="activeName =='second'" :user-detail="userDetail" :conversation-id="conversationId" />
      </el-tab-pane>
      <el-tab-pane
        v-if="hasAuth"
        :label="$t('common.tabs.wiki')"
        name="three"
        style="height:100%;"
      >
        <Repository :hx-id-obj="hxIdObj" v-if="activeName =='three'" :source="source" />
      </el-tab-pane>
      <el-tab-pane v-if="hasAuth" :label="$t('common.tabs.serviceRemark')" name="Four" style="height:100%;">
        <ServiceNotes v-if="activeName =='Four'" ref="ServiceNotes" :is-conversation="true" @refresh="$emit('refresh')" :customer-id="userDetail.customerId" :conversation-status="conversationStatus" :im-setting-config="ImSettingConfig" :id="conversationId" @RequiredNotes="SetRequiredNotes" module="在线客服" :biz-no="CurrentConversationInfo.conversationNumber" />
      </el-tab-pane>
      <!-- 开启企业微信-微信客服 -->
      <el-tab-pane
        v-if="source === 'weChat' && tenantType === 2"
        :label="$t('system.frameView.belongCustomerService')"
        name="service"
        style="height:100%;"
      >
        <CustomerService
          v-if="activeName =='service'"
          :conversationId="conversationId"
        />
      </el-tab-pane>
      <!-- 邮件客服不显示商品管理 -->
      <el-tab-pane v-if="isCommonIm" :label="$t('im.imChat.components.chatDetail.title3')" name="goods" style="height:100%;">
        <GoodManage :hx-id-obj="hxIdObj"/>
      </el-tab-pane>
    </el-tabs>
  </div>
  <div v-else class="default chat-detail">
    <div class="default-img">
      <img :src="noDataImage" alt="" />
    </div>
    <div class="default-msg">{{$t('common.base.tip.noData')}}</div>
  </div>
</template>

<script>
import ServiceNotes from '../../../imDetail/ServiceNotes.vue';
import BaseInfo from './baseInfo.vue';
import ServiceRecord from './seviceRecords.vue';
import Repository from './Repository.vue';
import CustomerService from './CustomerService.vue';
import GoodManage from './GoodManage.vue';
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'chat-detail',
  inject: ['initData'],
  data() {
    return {
      noDataImage,
      activeName: 'first',
      NotesInfo: {},
    };
  },
  computed: {
    hasAuth() {
      return this.initData?.auths?.INFO_VIEW;
    },
    isOpenWeChatService() {
      // 微信客服功能灰度控制
      return this.initData?.openWeChatService;
    },
    // 0：钉钉端，1：自建，2：企微端
    tenantType() {
      let type;
      if (this.initData.tenantType) {
        type = this.initData.tenantType;
      } else {
        type = JSON.parse(window.parent._init || '{tenantType:\'\'}').tenantType;
      }
      return type;
    },
    isBigWidth() {
      return this.activeName == 'Four';
    },
    isCommonIm() {
      return ['', 'im', 'weChat'].includes(this.source)
    },
  },
  props: {
    ImSettingConfig: {
      type: Object,
      default: () => {},
    },
    conversationStatus: {
      type: [Number, String],
    },
    conversationId:{type:[Number, String]},
    userDetail: {
      type: Object,
    },
    isShowDefalut: {
      type: Boolean,
    },
    source: {
      type: String,
    },
    hxIdObj: {
      type: Object,
      default: () => ({}),
    },
    conversationStatus: {
      type: [String, Number],
      default: 2,
    },
    CurrentConversationInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    SetRequiredNotes(data) {
      this.$emit('SetRequiredNotes', data);
    },
    // 点击tab
    handleTabClick(tab) {
      // 埋点统计
      const trackIdObj = {
        three: 'CHAT_CHECK_WIKI_TAB',
        second: 'CHAT_SERVICE_RECORD_TAB',
        Four: 'CHAT_SERVICE_NOTES_TAB'
      }
      const trackId = trackIdObj[tab.name]
      trackId && this.$track.clickStat(this.$track.formatParams(trackId));
    }
  },
  components: {
    BaseInfo,
    ServiceRecord,
    Repository,
    CustomerService,
    ServiceNotes,
    GoodManage,
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-tabs {
  display: flex;
  flex-direction: column;
}
::v-deep .el-tabs__active-bar {
  background-color: transparent !important;
}
::v-deep .el-tabs__nav {
  display: flex !important;
  flex-wrap: wrap !important;
}
::v-deep .el-tabs__item.is-active {
  border-bottom: 2px solid $color-primary-light-6;
}
::v-deep .el-tab-pane {
  height: 100%;
}
::v-deep .el-tabs__content {
  flex: 1;
}
::v-deep .el-tabs__item {
  padding: 0 10px !important;
}
.chat-detail {
  background: #fafafa;
  width: 310px;
  // width: 430px;
  padding: 4px 16px;
  font-size: 14px;
  height: 100%;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.bigWidth {
  width: 400px !important;
}
.default {
  position: relative;
  .default-img {
    text-align: center;
    padding-top: 96px;
    img {
      width: 160px;
      height: 160px;
    }
  }
  .default-msg {
    margin-top: 8px;
    color: $text-color-regular;
    text-align: center;
  }
}
</style>
